<template>
  <div class="user-home">
    <div>
      <div class="user-nav">
        <h2>用户列表</h2>
        <button @click="adduser">增加</button>
        <button @click="changeuser">修改</button>
        <button @click="chooseexit">删除</button>
      </div>
      <table class="user-item">
        <thead class="user-thead">
          <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号码</th>
            <th>用户权限</th>
            <th :class="{exit: isexit}">操作</th>
            <th :class="{change: ischange}">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in userList" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.username}}</td>
            <td>{{item.realname}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
            <td>{{item.phone}}</td>
            <td>
              <span class="user-level" :data-value="item.level">{{item.level}}</span>
            </td>
            <td :class="{exit: isexit}"><el-button type="danger" @click="exituser(index)">删除</el-button></td>
            <td :class="{change: ischange}"><el-button type="primary" @click="chooseuser(index)">修改</el-button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 修改用户信息 -->
    <div class="changeitem" :class="{close: isclose}">
      <div class="change-head">
        <span class="change-title">修 改 用 户</span>
        <span class="change-back" @click="closechange">X</span>
      </div>
      <div class="change-mess">
        用&nbsp;&nbsp;户&nbsp;&nbsp;名：<input type="text" id="change-username" :value="this.oldinfo1.username"><br>
        
        姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" class="addname" id="change-realname" :value="this.oldinfo1.realname"><br>
        <el-radio v-model="this.oldinfo1.sex" label="男">男</el-radio>
        <el-radio v-model="this.oldinfo1.sex" label="女">女</el-radio><br>
        年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" class="addage" id="change-age" :value="this.oldinfo1.age"><br>
        手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" class="addphone" id="change-phone" :value="this.oldinfo1.phone"><br>
        
        
        
        用户权限： <el-select v-model.lazy="this.userList[this.chooseindex].level" class="m-2" >
                    <el-option
                      v-for="item in islevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select><br>
        
        <el-button type="primary" @click="changeClick">确 认 修 改</el-button>
      </div>
    </div>
    <!-- 增加用户弹窗 -->
    <div class="additem" :class="{isactive: isopen}">
      <div class="add-head">
        <span class="add-title">添 加 用 户</span>
        <span class="add-back" @click="adduser">X</span>
      </div>
      <div class="add-mess">
        用&nbsp;&nbsp;户&nbsp;&nbsp;名：<input type="text" class="addusername" v-model="isusername" placeholder="请输入用户名"><br>
        姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" class="addname" placeholder="请输入姓名" v-model="isrealname"><br>
        <el-radio v-model="issex" label="男">男</el-radio>
        <el-radio v-model="issex" label="女">女</el-radio><br>
        年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" class="addage" placeholder="请输入年龄" v-model="isage"><br>
        手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" class="addphone" placeholder="请输入手机号" v-model="isphone"><br>
        
        
        
        用户权限： <el-select v-model="value" class="m-2" placeholder="请选择用户权限">
                    <el-option
                      v-for="item in islevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select><br>
        
        <el-button type="primary" @click="addClick">确 认</el-button>
        <el-button type="info" @click="resetmess">重 置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import operate from '@/utils/operate'

export default {
    name: 'user',
    data() {
      return {
        userList: [
          { id: 1, username: 'fang', realname: '方绳宇', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 2, username: 'zhang', realname: '张三', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 3, username: 'li', realname: '李四', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 4, username: 'wang', realname: '王五', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 5, username: 'zhu', realname: '朱八', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 6, username: 'user1', realname: 'user1', sex: '男', age: 22, phone: '12345678910', level: 'vip' },
          { id: 7, username: 'user2', realname: 'user2', sex: '男', age: 22, phone: '12345678910', level: 'vip' }
        ],
        isopen: true,
        isusername: '',
        isrealname: '',
        issex: '男',
        isage: '',
        isphone: '',
        chooseindex: 0,
        //存储点击修改的用户的信息
        oldinfo1: {},
        //存储修改之后的信息
        // oldinfo: {},
        value: ref(''),
        islevel: [
          {
            value: 'vip',
            label: 'vip',
          },
          {
            value: '普通用户',
            label: '普通用户',
          },
          {
            value: '游客用户',
            label: '游客用户',
          },
        ],
        isexit: true,
        ischange: true,
        isclose: true,
        vipuser: 0,
        normaluser: 0,
        visituser:0
      }
    },
    methods: {
      //显示添加用户标签
      adduser() {
        this.isopen = !this.isopen
      },
      addClick() {
        if(this.isusername == ''||this.isrealname == ''||this.issex == ''||this.isage == ''){
          ElMessage({
            message: '请填写相关信息',
            type: 'warning',
          })
        }else {
          this.isopen = !this.isopen
          let useritem = {
            id: this.userList.length + 1,
            username: this.isusername,
            realname: this.isrealname,
            sex: this.issex,
            age: this.isage,
            phone: this.isphone,
            level: this.value
          }
          this.userList.push(useritem)
          operate('admin',"新增用户")
          // console.log(this.userList)
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        }
        
        // console.log(this.isusername)
      },
      resetmess() {
        this.isusername = '',
        this.isrealname = '',
        this.issex = '男',
        this.isage = '',
        this.isphone = ''
        this.value = ''
      },
      chooseexit() {
        this.isexit = !this.isexit
      },
      exituser(index) {
        // console.log(index)
        this.userList.splice(index,1)
        operate('admin',"删除用户信息")
      },
      // 显示/隐藏修改标签
      changeuser() {
        this.ischange = !this.ischange
      },
      // 关闭修改用户内容标签
      closechange(){
        this.isclose = !this.isclose
      },
      //显示所选用户的修改信息标签
      chooseuser(index) {
        this.isclose = !this.isclose
        this.chooseindex = index
        this.oldinfo1 = this.userList[this.chooseindex]
        // console.log(this.oldinfo1)
      },
      //提交修改所选用户内容，并关闭修改内容标签
      changeClick() {
        ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        this.isclose = !this.isclose
        let chooseinfo = {
            username: document.getElementById('change-username').value,
            realname: document.getElementById('change-realname').value,
            sex: this.userList[this.chooseindex].sex,
            age: document.getElementById('change-age').value,
            phone: document.getElementById('change-phone').value,
            level: this.userList[this.chooseindex].level
          }
          //将更改后的用户信息与更改前的信息替换
        this.userList.splice(this.chooseindex,1,chooseinfo)
        operate('admin',"修改用户信息")
      }
    },
    beforeMount() {
      //JSON.parse local中字符串转化为数组
      let testuserlist = JSON.parse(localStorage.getItem('localuserlist'))
      if(testuserlist){
        this.userList = testuserlist
        localStorage.setItem('usernum',this.userList.length)
      }
      // this.userList = JSON.parse(localStorage.getItem('localuserlist'))
      // console.log(this.userList.length)
      
    },
    Updated() {
      localStorage.setItem('usernum',this.userList.length)
    },
    beforeUnmount() {
      //组件销毁前将userlist存入local中
      localStorage.setItem('localuserlist',JSON.stringify(this.userList))
      localStorage.setItem('usernum',this.userList.length)
      //计算各等级用户数量
      for(let i=0;i<this.userList.length;i++){
        if(this.userList[i].level == 'vip') {
          this.vipuser += 1
        }else if(this.userList[i].level == '普通用户'){
          this.normaluser += 1
        }else {
          this.visituser += 1
        }
      }
      //提交各权限用户数量
      localStorage.setItem('vipuser',this.vipuser)
      localStorage.setItem('normaluser',this.normaluser)
      localStorage.setItem('visituser',this.visituser)
    }

}
</script>

<style scoped>
.user-home {
  position: relative;
}
.user-nav {
  width: 100%;
  height: 60px;
  display: flex;
  margin-bottom: 8px;
  /* border-bottom: 1px solid #000; */
  box-shadow: 2px 0px 5px #ccc;
  /* text-align: center; */
}
.user-nav h2 {
  line-height: 60px;
  margin: 0 auto;
}
.user-nav button {
  float: right;
  border: none;
  width: 90px;
  height: 40px;
  background-color: lightskyblue;
  color: #fff;
  margin-top: 10px;
  margin-right: 10px;
}
.user-item {
  /* display: block; */
  width: 95%;
  /* margin-top: 50px; */
  /* border: 1px solid #000; */
  margin: 0 auto;
}
.user-thead{
  /* border-bottom: 1px solid #000; */
  font-size: 20px;
}
.user-thead tr:hover {
  background-color: #ccc;
}
/* .user-item tbody {
  border: 1px solid #ccc;
} */
.user-item tbody tr{
  /* display: inline-block; */
  height: 50px;
  /* line-height: 50px; */
  box-sizing: border-box;
  text-align: center;
}
.user-item tbody tr:nth-child(2n-1) {
  background-color: rgb(221, 221, 221);
}
.user-item tbody tr .user-level{
  /* background-color: rgb(221, 221, 221); */
  /* display: inline-block; */
  border-radius: 4px;
  /* background-color: lightskyblue; */
  box-sizing: border-box;
  display: inline-block;
  width: 100px;
  height: 30px;
  color: #fff;
  font-size: 18px;
}
.user-item tbody tr .user-level[data-value="vip"]{
  background-color: red;
}
.user-item tbody tr .user-level[data-value="普通用户"]{
  background-color: lightskyblue;
}
.user-item tbody tr .user-level[data-value="游客用户"]{
  background-color: lightgreen;
}
.additem {
  position: absolute;
  width: 800px;
  height: 600px;
  top: 50px;
  left: 30%;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 4px #ccc;
  /* opacity: .5; */
}
.add-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.add-title {
  float: left;
  margin-left: 10px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
}
.add-back {
  float: right;
  margin-right: 13px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
  color: #ccc;
}
.add-back:hover {
  color:rgb(0, 184, 184)
}
.isactive {
  display: none;
}
.add-mess {
  padding-left: 40px;
}
.add-mess input{
  margin-top: 40px;
}
.add-mess input::placeholder{
  color: #ccc;
}
.addusername,.addname,.addage,.addphone,.addrights{
  width: 500px;
  height: 30px;
}
.addname {
  margin-bottom: 30px;
}
.addphone {
  margin-bottom: 30px;
}
.add-mess button{
  margin-left: 180px;
  margin-top: 50px;
}
.exit {
  display: none;
}
.change {
  display: none;
}
.changeitem {
  position: absolute;
  width: 800px;
  height: 600px;
  top: 50px;
  left: 30%;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 4px #ccc;
}
.change-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.change-title {
  float: left;
  margin-left: 10px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
}
.change-back {
  float: right;
  margin-right: 13px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
  color: #ccc;
}
.change-back:hover {
  color:rgb(0, 184, 184)
}
.close {
  display: none;
}
</style>